<template>
  <div v-if="quoteMsg && quoteMsg.id" class="quote-container">
    <div class="quote-wrap">
      <div class="quote-content">
        {{ nickName }}:
        <!-- 链接文本 -->
        <span v-if="quoteMsg.type === 'link'">
          <el-link
            type="primary"
            disabled
            :underline="false"
            :href="quoteMsg.link"
            target="_blank"
            style="white-space: pre-wrap"
            >{{ message.linekText }}</el-link
          >
        </span>
        <!-- 文本 -->
        <span v-if="quoteMsg.type === 'text'">
          <span style="white-space: pre-wrap">{{ message.content }}</span>
        </span>
        <!-- 图片 -->
        <span v-if="quoteMsg.type === 'photo'" class="img-wrap">
          <el-image class="img" :src="message.url" fit="cover" />
        </span>
        <!-- 文件 -->
        <span v-if="quoteMsg.type === 'file'" class="file-wrap">
          <img :src="fileIcon" class="file-icon" />
          <div class="file-wrap-content">
            <div class="file-wrap-top">
              <span class="file-name">{{ message.name }}</span>
            </div>
            <div class="file-wrap-bottom">
              <span class="file-size">{{
                g_utils.transformByteData(message.size)
              }}</span>
            </div>
          </div>
        </span>
      </div>
    </div>
    <el-icon
      v-if="props.type === '1'"
      class="quote-close"
      @click="handleCloseQuote"
    >
      <i-ep-CircleCloseFilled />
    </el-icon>
  </div>
</template>

<script setup>
import fileIcon from '@/assets/file.png'

const props = defineProps({
  type: {
    type: String,
    default: '' // 0-消息列表的引用 1-输入框的引用
  },
  nickName: {
    type: String,
    default: ''
  }
})

const quoteMsg = defineModel({
  type: [String, Object],
  default: ''
})
const message = computed(() => {
  const msg = quoteMsg.value?.message || ''
  return msg ? JSON.parse(msg) : {}
})

onMounted(() => {})

const handleCloseQuote = _ => {
  quoteMsg.value = ''
}
</script>

<style lang="scss" scoped>
.quote-container {
  display: flex;
  align-items: center;
  margin: 5px;
  .quote-wrap {
    max-width: 400px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
  }
  .quote-content {
    // max-height: 35px;
    font-size: 12px;
    color: #888;
    @extend .twoEllipsis;
  }
  .img-wrap {
    .img {
      display: block;
      :deep(.el-image__inner) {
        max-height: 50px;
      }
    }
  }
  .quote-close {
    cursor: pointer;
    margin-left: 5px;
    color: #ccc;
  }
  .file-wrap {
    display: flex;
    align-items: flex-start;
    .file-icon {
      display: block;
      width: 64 * 0.5px;
      height: 64 * 0.5px;
    }
    .file-wrap-content {
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .file-wrap-top {
        min-width: 140px;
      }
      .file-wrap-bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 5px;
        .file-size {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
